<nz-modal
  [nzVisible]="showEditCollectionDialog()"
  (nzVisibleChange)="toggleDialogChange.emit($event)"
  nzCloseIcon="close-circle"
  [nzTitle]="modalTitle"
  [nzContent]="modalContent"
  [nzFooter]="modalFooter"
  [nzWidth]="800"
  (nzOnCancel)="toggleDialogChange.emit($event)"
>
  <ng-template #modalTitle>
    <div class="app-dialog-header">
      <div class="app-dialog-title">
        {{ 'EDIT_COLLECTION_TITLE_TEXT' | translate }}
      </div>
      {{ 'EDIT_COLLECTION_TITLE_SUBTEXT' | translate }}
    </div>
  </ng-template>

  <ng-template #modalContent>
    @if (collection()) {
      <div class="app-dialog-body">
        <div class="app-dialog-section">
          <div class="form-group">
            {{ 'COLLECTION_TITLE_LABEL' | translate }}
            <input
              type="text"
              class="input"
              [ngModel]="title()"
              (ngModelChange)="title.set($event)"
            />
          </div>
        </div>
        <div class="app-dialog-section">
          <nz-tabset [nzAnimated]="false" nzSize="small" [nzTabBarGutter]="16">
            <nz-tab [nzTitle]="'PRE_REQUEST_TAB' | translate">
              <app-pre-request-editor
                [preRequest]="preRequest()"
                (preRequestScriptChange)="updatePreRequestScript($event)"
                (preRequestEnabledChange)="updatePreRequestEnabled($event)"
              />
            </nz-tab>
            <nz-tab [nzTitle]="'POST_REQUEST_TAB' | translate">
              <app-post-request-editor
                [postRequest]="postRequest()"
                (postRequestScriptChange)="updatePostRequestScript($event)"
                (postRequestEnabledChange)="updatePostRequestEnabled($event)"
              />
            </nz-tab>
            <nz-tab [nzTitle]="'ENVIRONMENTS_MANAGER_TEXT' | translate">
              <app-codemirror
                #editor
                class="environments-editor-textarea"
                [extensions]="editorExtensions"
                [fullHeight]="true"
                [redrawLayout]="showEditCollectionDialog()"
                [ngModel]="environmentVariablesStr()"
                (ngModelChange)="onEnvironmentVariablesChange($event)"
              />
            </nz-tab>
            <nz-tab [nzTitle]="'HEADERS_TEXT' | translate">
              <app-headers-editor
                [headers]="headers()"
                (headerEnabledChange)="
                  updateHeaderEnabled($event.enabled, $event.index)
                "
                (headerKeyChange)="updateHeaderKey($event.key, $event.index)"
                (headerValueChange)="updateHeaderValue($event.value, $event.index)"
                (addHeaderChange)="addHeader()"
                (removeHeaderChange)="removeHeader($event)"
              />
            </nz-tab>
          </nz-tabset>
        </div>
      </div>
    }
  </ng-template>

  <ng-template #modalFooter>
    <div class="app-dialog-footer">
      <button
        type="button"
        class="btn btn--primary right"
        track-id=""
        (click)="updateCollection()"
      >
        {{ 'SAVE_BUTTON' | translate }}
      </button>
    </div>
  </ng-template>
</nz-modal>
